<template>
<div class="container">
  <headers :title="title" :refresh="isRefresh" :path="path"></headers>
  <div class="content" id="app-ucenter">
    <div class="list-block no-margin uc-bander">
      <div class="uc-user-info">
        <div class="uc-uname">{{userInfo.name | username}}</div>
        <div class="uc-tuijianma">推荐码：{{userInfo.id}}</div>
      </div>
    </div>
    <div class="list-block no-margin">
      <ul>
        <li class="item-content">
          <div class="item-media"><i class="icon icon-item-yue"></i></div>
          <div class="item-inner no-padding-left">
            <div class="item-title label">发布余额</div>
            <div class="item-after" @click="goChongzhi">{{userInfo.currentGold}}蚂蚁币</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-media"><i class="icon icon-item-tixian"></i></div>
          <div class="item-inner no-padding-left">
            <div class="item-title label">提现总额</div>
            <div class="item-after">{{userInfo.cashSum}}元</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-block no-margin mar-top-10">
      <ul>
        <li class="item-content">
          <div class="item-media"><i class="icon icon-item-tuijian"></i></div>
          <div class="item-inner no-padding-left">
            <div class="item-title label">我推荐的人数</div>
            <div class="item-after">{{userInfo.recommendPersonNum | peoples}}人</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-media"><i class="icon icon-item-fenhong"></i></div>
          <div class="item-inner no-padding-left">
            <div class="item-title label">推荐分红总额</div>
            <div class="item-after">{{userInfo.recommendGold | fenhong}}元</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-block mar-top-10">
      <ul>
        <li class="item-content" @click="changePhone">
          <div class="item-media"><i class="icon icon-item-mobile"></i></div>
          <div class="item-inner no-padding-left">
            <div class="item-title label">我的手机</div>
            <div class="item-after">{{userInfo.phone}}</div>
          </div>
        </li>
      </ul>
    </div>
    <footer class="footer">
      <div class="tips">如需帮助或者发布特殊任务请APP内留言或者在公众号内留言</div>
      <div class="copyrights-cn">版权所有 靖江兴顺软件服务部</div>
      <div class="copyrights-en">Copyright@2017</div>
    </footer>
  </div>
  <nav class="bar bar-tab">
    <a class="tab-item" v-link="{path: '/home', replace: true}">
      <span class="icon icon2 home-icon"></span>
      <span class="tab-label">首页</span>
    </a>
    <a class="tab-item" v-link="{path: '/tuijianma', replace: true}">
      <span class="icon icon2 tuijianma-icon"></span>
      <span class="tab-label">推荐码</span>
    </a>
    <a class="tab-item" v-link="{path: '/ucenter', replace: true}">
      <span class="icon icon2 ucenter-icon"></span>
      <span class="tab-label">个人中心</span>
    </a>
  </nav>
</div>
</template>

<script>
import $ from 'zepto'
import Headers from '../components/Headers'
import store from '../assets/js/store.min.js'

export default {
  ready () {
    $.init()
    this.getUserInfo()
  },
  data () {
    return {
      title: '个人中心',
      path: '/home',
      isRefresh: true,
      customerId: store('customerId') || 0,
      userInfo: []
    }
  },
  methods: {
    goChongzhi () {
      this.$router.replace('/chongzhi')
    },
    getUserInfo () {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findCustomer', {
        params: {
          customerId: this.customerId
        }
      }).then((data) => {
        this.$set('userInfo', data.data)
      })
    },
    changePhone () {
      let u = navigator.userAgent
      if (!!u.match(/AppleWebKit.*Mobile.*/) && (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1)) {
        try {
          // $.alert('Android changePhone')
          window.Android.changePhone()
        }
        catch (e) {
          console.warn(e)
        }
      }
      if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        try {
          // $.alert('iOS changePhone')
          window.webkit.messageHandlers.changePhone.postMessage('a')
        }
        catch (e) {
          console.warn(e)
        }
      }
    }
  },
  filters: {
    username (name) {
      if (name === null || name === '') {
        return this.userInfo.id
      }
      return name
    },
    peoples (count) {
      if (count === null || count === '') {
        return 0
      }
      return count
    },
    fenhong (gold) {
      if (gold === null || gold === '') {
        return 0
      }
      return gold
    }
  },
  components: {
    Headers
  }
}
</script>
<style scoped>
.bar:after{
  height:0!important;
}
.no-margin ul:before{
  height:0!important;
}
.uc-bander{
  height:100px;
  background:url(../assets/images/ucenter/ucenter_bander.png) center center no-repeat;
  background-size:100% 100%;
}
.uc-bander .uc-user-info{
  position:relative;
  top:30%;
  width:50%;
  height:50px;
  text-align:center;
  font-size:16px;
  color:#FFF;
  margin:0 auto;
}
.item-content{
  padding-left:15px!important;
}
.item-title{
  text-indent:10px;
}
.icon.icon-item-yue {
  width: 21px;
  height: 21px;
  background-image: url("../assets/images/ucenter/ucenter_yue.png");
}
.icon.icon-item-tixian {
  width: 21px;
  height: 21px;
  background-image: url("../assets/images/ucenter/ucenter_tixian.png");
}
.icon.icon-item-tuijian {
  width: 21px;
  height: 21px;
  background-image: url("../assets/images/ucenter/ucenter_tuijian.png");
}
.icon.icon-item-fenhong {
  width: 21px;
  height: 21px;
  background-image: url("../assets/images/ucenter/ucenter_fenhong.png");
}
.icon.icon-item-mobile {
  width: 21px;
  height: 21px;
  background-image: url("../assets/images/ucenter/ucenter_mobile.png");
}
footer {
  width:100%;
  padding:20px 15px;
  font-size:14px;
  margin-bottom:48px;
  text-align:center;
}
</style>
